<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input v-model="listQuery.merchant_name" placeholder="商户名称/收款人" style="width: 130px;" class="filter-item"
        @keyup.enter.native="handleFilter" />
      <el-select v-model="listQuery.province" placeholder="请选择省" filterable class="filter-item" style="width: 130px;" @change="changeRegionProvince">
        <el-option v-for="(province,index) in this.merchant_province" :label="province.name" :value="province.region_id"
          :key="index" />
      </el-select>
      <el-select v-model="listQuery.city" placeholder="请选择市"  style="width: 130px;" filterable class="filter-item" @change="changeRegionCity">
        <el-option v-for="(city,index) in this.merchant_city" :label="city.name" :value="city.region_id" :key="index" />
      </el-select>
      <el-select v-model="listQuery.district" placeholder="请选择区县" filterable style="width: 130px;" class="filter-item">
        <el-option v-for="(district,index) in this.merchant_district" :label="district.name" :value="district.region_id"
          :key="index" />
      </el-select>
      <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
        查询
      </el-button>
      <el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-edit" @click="handleCreate">
        新增
      </el-button>
      <el-button v-waves class="filter-item" type="primary" icon="el-icon-search"  @click="excelout">导出</el-button>

    </div>

    <el-table :key="tableKey" v-loading="listLoading" :data="list" size="mini"  border fit highlight-current-row style="width: 100%;"
      @sort-change="sortChange">
    
       <el-table-column label="签约日期" align="center" width="160px">
        <template slot-scope="{row}">
          <div  class="block">
            <el-date-picker
              v-model="row.create_time"
              @change="changeSignDate(row)"
              style="width:140px"
              format="yyyy-MM-dd"
              type="datetime"
              placeholder="选择日期"
            />
          </div>
        </template>
      </el-table-column>
      <el-table-column label="地址" align="center"  width="70px">
        <template slot-scope="{row}">
          <span>{{ row.city_name }}</span>
        </template>
      </el-table-column>

      <el-table-column label="商户名称" align="center"  width="300px">
        <template slot-scope="{row}">
          <span>{{ row.merchant_name }}</span>
        </template>
      </el-table-column>

      <el-table-column label="医美类型" align="center"  width="80px">
        <template slot-scope="{row}">
          <span>{{ row.merchant_type == 1?'医美':'生美' }}</span>
        </template>
      </el-table-column>

      <!-- <el-table-column label="海尔云贷" align="center"  width="80px">
        <template slot-scope="{row}">
          <span>{{ row.haier_online == 1?'已上线':'未上线' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="通融小贷" align="center"  width="80px">
        <template slot-scope="{row}">
          <span>{{ row.tongrong_online == 1?'已上线':'未上线' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="捷易担保" align="center"  width="80px">
        <template slot-scope="{row}">
          <span>{{ row.jieyi_online == 1?'已上线':'未上线' }}</span>
        </template>
      </el-table-column> -->

      <!-- <el-table-column label="打款比例" align="center"  width="150px">
        <template slot-scope="{row}">
          <span>{{ row.pay_rate }}</span>
        </template>
      </el-table-column> -->
      <el-table-column label="收款账号" align="center"  width="170px">
        <template slot-scope="{row}">
          <span>{{ row.bank_number }}</span>
        </template>
      </el-table-column>
      <el-table-column label="收款人" align="center"  width="160px">
        <template slot-scope="{row}">
          <span>{{ row.pay_person }}</span>
        </template>
      </el-table-column>
      <el-table-column label="开户行地址" align="center" width="280px">
        <template slot-scope="{row}">
          <span>{{ row.bank_address }}</span>
        </template>
      </el-table-column>
      <el-table-column label="证件号" align="center" width="180px">
        <template slot-scope="{row}">
          <span>{{ row.idnumber }}</span>
        </template>
      </el-table-column>
      <!-- <el-table-column label="签章授权" align="center" width="80px">
        <template slot-scope="{row}">
          <el-switch v-model="row.merchant_auth" @change="change_auth(row)" active-color="#13ce66"></el-switch>
        </template>
      </el-table-column> -->

      <!-- <el-table-column label="订单数" align="center">
        <template slot-scope="{row}">
          <span>{{ row.level_name }}</span>
        </template>
      </el-table-column> -->
      <!-- <el-table-column label="审核状态" align="center">
        <template slot-scope="{row}">
          <span v-if="row.is_checked==1">已审核</span>
          <span v-if="row.is_checked==0">未审核</span>
        </template>
      </el-table-column> -->
      <!-- <el-table-column label="状态" class-name="status-col" style="display: none;">
        <template slot-scope="{row}">
          <el-tag :type="row.status | statusFilter">
            {{ row.status_name }}
          </el-tag>
        </template>
      </el-table-column> -->
      <el-table-column label="操作" align="center" width="240" class-name="small-padding fixed-width">
        <template slot-scope="{row,$index}">
          <el-dropdown-item>
                <el-button type="primary" size="mini" @click="handleUpdate(row)">
                  编辑商户
                </el-button>
                <el-button type="success" size="mini" @click="publiceAccount(row)">
                  对公账户
                </el-button>
              </el-dropdown-item>
        </template>

      </el-table-column>
    </el-table>

    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />

    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" width="960px" :close-on-click-modal="false">
      <el-form ref="dataForm" :rules="rules" :model="temp" label-position="left" label-width="100px" style="width: 80%; margin-left:70px;">
        <el-tabs v-model="activeName">
          <el-tab-pane label="工商信息" name="first">
            <el-form-item label="企业名称" prop="merchant_name">
              <el-input v-model="temp.merchant_name" type="text" placeholder="请输入企业名称" />
            </el-form-item>
            <el-form-item label="企业简称" prop="sort_name">
              <el-input v-model="temp.sort_name" type="text" placeholder="请输入企业简称" />
            </el-form-item>
            <el-form-item label="商户类型" prop="type_id">
              <el-select v-model="temp.type_id" placeholder="请选择商户类型">
                <el-option v-for="(type,index) in this.merchant_type" :label="type.type_name" :value="type.type_id" />

              </el-select>
            </el-form-item>
            <el-form-item label="医美类型" prop="merchant_type">
              <el-select v-model="temp.merchant_type" placeholder="请选择医美类型">
                <el-option label="医美" :value="1" />
                <el-option label="生美" :value="2" />
              </el-select>
            </el-form-item>
            <el-form-item label="所在省份" prop="province">
              <el-select v-model="temp.province" placeholder="请选择省份" filterable @change="changeRegionProvince">
                <el-option v-for="(province,index) in this.merchant_province" :label="province.name" :value="province.region_id"
                  :key="index" />

              </el-select>
            </el-form-item>
            <el-form-item label="所在城市" prop="city">
              <el-select v-model="temp.city" placeholder="请选择市" filterable @change="changeRegionCity">
                <el-option v-for="(city,index) in this.merchant_city" :label="city.name" :value="city.region_id" :key="index" />

              </el-select>
            </el-form-item>
            <el-form-item label="所在区县" prop="district">
              <el-select v-model="temp.district" placeholder="请选择区县">
                <el-option v-for="(district,index) in this.merchant_district" filterable :label="district.name" :value="district.region_id"
                  :key="index" />
              </el-select>
            </el-form-item>
            <el-form-item label="法人姓名" prop="law_person_name">
              <el-input v-model="temp.law_person_name" type="text" placeholder="请输入法人姓名" />
            </el-form-item>
            <el-form-item label="执照证件号" prop="law_person_name">
              <el-input v-model="temp.idnumber" type="text" placeholder="请输入营业执照证件号" />
            </el-form-item>
            <el-form-item label="商户地址" prop="merchant_address">
              <el-input v-model="temp.merchant_address" type="text" placeholder="请输入地址" />
            </el-form-item>
            <el-form-item label="法人身份证(正)" prop="law_person_idcard_zheng">
              <el-upload class="avatar-uploader" :action="UploadUrl()" list-type="picture-card" :on-success="handIdcardZhengSuccess"
                :before-upload="beforeAvatarUpload" :headers="myHeaders" :on-preview="handlePreview" :limit="limit"
                :file-list="idCardZhengfileList">
                <i class="el-icon-plus avatar-uploader-icon" />
              </el-upload>

            </el-form-item>
            <el-form-item label="法人身份证(反)" prop="law_person_idcard_fan">
              <el-upload class="avatar-uploader" :action="UploadUrl()" list-type="picture-card" :on-success="handIdcardFanSuccess"
                :before-upload="beforeAvatarUpload" :headers="myHeaders" :on-preview="handlePreview" :limit="limit"
                :file-list="idCardFanfileList">
                <i class="el-icon-plus avatar-uploader-icon" />
              </el-upload>

            </el-form-item>
            <!-- <el-form-item label="医疗许可证" prop="medical_license">

              <el-upload class="avatar-uploader" :action="UploadUrl()" list-type="picture-card" :on-success="handMedicalSuccess"
                :before-upload="beforeAvatarUpload" :headers="myHeaders" :on-preview="handlePreview" :limit="limit"
                :file-list="medicalfileList">
                <i class="el-icon-plus avatar-uploader-icon" />
              </el-upload>

            </el-form-item> -->
            <el-form-item label="医疗许可证">
              <el-upload class="avatar-uploader" list-type="picture-card" :action="UploadUrl()" :on-success="handMedicalSuccess"
                :before-upload="beforeAvatarUpload" :headers="myHeaders" :multiple="true" :on-remove="medicalfileRemove"
                :on-preview="handlePreview" :file-list="medicalfileList">
                <i class="el-icon-plus avatar-uploader-icon" />
              </el-upload>
            </el-form-item>
            <el-form-item label="营业执照" prop="business_license">
              <el-upload class="avatar-uploader" :action="UploadUrl()" list-type="picture-card" :on-success="handBussessionSuccess"
                :before-upload="beforeAvatarUpload" :headers="myHeaders" :on-preview="handlePreview" :limit="limit"
                :file-list="businessLicensefileList">
                <i class="el-icon-plus avatar-uploader-icon" />
              </el-upload>
            </el-form-item>
            <el-form-item label="签章授权书">
              <el-upload class="avatar-uploader" list-type="picture-card" :action="UploadUrl()" :on-success="handAuthSuccess"
                :before-upload="beforeAvatarUpload" :headers="myHeaders" :multiple="true" :on-remove="handAuthfileRemove"
                :on-preview="handlePreview" :file-list="AuthfileList">
                <i class="el-icon-plus avatar-uploader-icon" />
              </el-upload>
            </el-form-item>
          </el-tab-pane>
          <el-tab-pane label="账户信息" name="second">
            <el-form-item label="开户账号" prop="bank_number">
              <el-input v-model="temp.bank_number" type="text" :disabled="accountNode === false" placeholder="请输入开户账号" />
            </el-form-item>
            <el-form-item label="开户地址" prop="bank_address">
              <el-input v-model="temp.bank_address" type="text" :disabled="accountNode === false" placeholder="请输入开户地址" />
            </el-form-item>

            <el-form-item label="开户许可">
              <el-upload class="avatar-uploader" list-type="picture-card" :action="UploadUrl()" :on-success="handBankPermitSuccess"
                :before-upload="beforeAvatarUpload" :headers="myHeaders" :multiple="true"  :on-remove="handlepermitRemove"
                :on-preview="handlePreview" :file-list="bankPermitfileList" :disabled="accountNode === false">
                <i class="el-icon-plus avatar-uploader-icon" :disabled="accountNode === false" />
              </el-upload>
            </el-form-item>
            <el-form-item label="收款账号" prop="pay_number">
              <el-input v-model="temp.pay_number" type="text" :disabled="accountNode === false" placeholder="请输入收款账号" />
            </el-form-item>
            <el-form-item label="收款人" prop="pay_person">
              <el-input v-model="temp.pay_person" type="text" :disabled="accountNode === false" placeholder="请输入收款人" />
            </el-form-item>
          </el-tab-pane>
          <el-tab-pane label="第三方信息" name="third">
            <el-form-item label="三方平台入住">
              <el-upload class="avatar-uploader" list-type="picture-card" :action="UploadUrl()" :on-success="handThirdPlatformSuccess"
                :before-upload="beforeAvatarUpload" :headers="myHeaders" :multiple="true" :on-remove="handleRemove"
                :on-preview="handlePreview" :file-list="fileList">

                <i class="el-icon-plus avatar-uploader-icon" />
              </el-upload>
            </el-form-item>
            <el-form-item label="工商信息" prop="business_information">

              <el-upload class="avatar-uploader" list-type="picture-card" :action="UploadUrl()" :on-success="handBusinessSuccess"
                :before-upload="beforeAvatarUpload" :headers="myHeaders" :multiple="true" :on-remove="handleBusinessRemove"
                :on-preview="handlePreview" :file-list="businessFileList">
                <i class="el-icon-plus avatar-uploader-icon" />
              </el-upload>

            </el-form-item>

          </el-tab-pane>
          <el-tab-pane label="合同信息" name="fourth">
            <el-form-item label="合同信息">
              <el-upload class="avatar-uploader" list-type="picture-card" :action="UploadUrl()" :on-success="handHetongSuccess"
                :before-upload="beforeAvatarUpload" :headers="myHeaders" :multiple="true" :on-remove="handleHetongRemove"
                :on-preview="handlePreview" :file-list="heTongFileList">
                <i class="el-icon-plus avatar-uploader-icon" />
              </el-upload>
            </el-form-item>
          </el-tab-pane>
          <el-tab-pane label="企业联系人" name="five">
            <el-form-item label="联系人姓名" prop="real_name">
              <el-input v-model="temp.real_name" type="text" placeholder="请输入联系人姓名" />
            </el-form-item>
            <el-form-item label="联系人手机" prop="mobile">
              <el-input v-model="temp.mobile" type="text" placeholder="请输入联系人手机" />
            </el-form-item>
            <el-form-item label="联系人职位" prop="merchant_position">
              <el-input v-model="temp.merchant_position" type="text" placeholder="请输入联系人职位" />
            </el-form-item>
            <el-form-item label="登录账号" prop="username">
              <el-input v-model="temp.username" type="text" placeholder="请输入联系人账号" />
            </el-form-item>
            <el-form-item label="登录密码" prop="password">
              <el-input v-model="temp.password" type="text" placeholder="请输入账号密码" />
            </el-form-item>
          </el-tab-pane>
          <el-tab-pane label="合作意向" name="six">
            <el-form-item label="是否独家" prop="is_alone">
              <el-select v-model="temp.is_alone" placeholder="请选择">
                <el-option label="是" value="1" />
                <el-option label="否" value="2" />
              </el-select>
            </el-form-item>

            <el-form-item label="打款比率" prop="pay_rate">
              <el-input v-model="temp.pay_rate" type="text" placeholder="请输入收款账号" />
            </el-form-item>
            <el-form-item label="用户费率" prop="pay_rate">
              <el-input v-model="temp.money_rate" type="number" placeholder="请输入收款账号" />
            </el-form-item>
            <el-form-item label="返佣比率" prop="pay_rate">
              <el-input v-model="temp.merchant_rate" type="number" placeholder="请输入收款账号" />
            </el-form-item>
          </el-tab-pane>
        </el-tabs>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">
          取消
        </el-button>
        <el-button type="primary" @click="dialogStatus==='create'?createData():updateData()">
          确认
        </el-button>
      </div>
    </el-dialog>

    <el-dialog :visible.sync="dialogCheckVisible" title="Reading statistics">
      <el-form ref="dataCheckForm" :rules="rule" :model="tempCheck" label-position="left" label-width="100px" style="width: 80%; margin-left:70px;">
        <el-form-item label="请选择等级" prop="level_id">
          <el-select v-model="tempCheck.level_id" placeholder="请选择等级">
            <el-option v-for="(level,index) in this.level_list" :label="level.name" :value="level.id" :key="index" />
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogCheckVisible = false">
          取消
        </el-button>
        <el-button type="primary" @click="handleChecked">确认</el-button>
      </span>
    </el-dialog>
    <el-dialog :visible.sync="dialogVisible" width="900px">
      <img :src="dialogImageUrl" alt="" width="800px">
    </el-dialog>
    <el-dialog title="打款账户" :visible.sync="merchantOnline" style="width:1000px;margin:auto">
      <el-form ref="dataForm" :model="online_form" label-width="150px">
        <el-form-item label="账户类型" >
          <el-select v-model="online_form.accountType" placeholder="账户类型" >
            <el-option   value="1" label="个人账户"/>
            <el-option   value="2" label="公司账户"/>
          </el-select>
        </el-form-item>
        <el-form-item label="选择开户地省">
          <el-select v-model="online_form.province_code" filterable placeholder="选择开户地省" @change="getInvestorRegion">
            <el-option v-for="(item,index) in this.province_list" :label="item.name" :value="item.code" :key="index" />
          </el-select>
        </el-form-item>
        <el-form-item label="选择开户地市">
          <el-select v-model="online_form.province_city" filterable placeholder="选择开户地市" >
            <el-option v-for="(item,index) in this.city_list" :label="item.name" :value="item.code" :key="index" />
          </el-select>
        </el-form-item>
        <el-form-item label="选择开户银行">
          <el-select v-model="online_form.bank_code" filterable placeholder="选择开户银行" >
            <el-option v-for="(item,index) in this.bank_list" :label="item.name" :value="item.code" :key="index" />
          </el-select>
        </el-form-item>
        <el-form-item label="账户名称" >
          <el-input v-model="online_form.accountName" />
        </el-form-item>
        <el-form-item label="账号" >
          <el-input v-model="online_form.accountNo" />
        </el-form-item>
        <el-form-item label="关联手机号" >
          <el-input v-model="online_form.mobile" />
        </el-form-item>
        <el-form-item label="开户支行行号" >
          <el-input v-model="online_form.coupletNo" />
        </el-form-item>
        <el-form-item label="开户支行名称" >
          <el-input v-model="online_form.branchBankName" />
        </el-form-item>
        <el-form-item label="开户证件类型" >
          <el-select v-model="online_form.idtype" placeholder="选择开户银行" >
            <el-option   value="BUSINESS_LICENSE" label="营业执照"/>
            <el-option   value="ID" label="身份证"/>
          </el-select>
        </el-form-item>
        <el-form-item label="开户证件号码" >
          <el-input v-model="online_form.idNo" />
        </el-form-item>
        <el-form-item label="开户证件有效期始" >
          <el-input v-model="online_form.idStartDate" placeholder="2000-12-12"/>
        </el-form-item>
        <el-form-item label="开户证件有效期止" >
          <el-input v-model="online_form.idExpiryDate"  placeholder="2000-12-12"/>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="merchantOnline = false">
          取消
        </el-button>
        <el-button type="primary" @click="publiceAccountSubmit()">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import {
    fetchMerchantBase,
    fetchMerchantRegion,
    fetchList,
    fetchMerchan,
    createMerchant,
    updateMerchantStatus,
    updateMerchantChecked,
    updateMerchant,
    deleteMerchant,
    changeSignDate,changeMerchantAuth,
    exceloutmerchant,
    haierOnlineSubmit,publiceAccountSubmit,getMerchantAccount
  } from '@/api/merchant'
  import {
    getInvestorRegion,yuanfeng_getBank
  } from '@/api/order'
  import excel from '@/components/excelout/index.vue'
  import waves from '@/directive/waves' // waves directive
  import {
    parseTime,getNodes
  } from '@/utils'
  import Pagination from '@/components/Pagination' // secondary package based on el-pagination
  export default {
    name: 'ComplexTable',
    components: {
      Pagination,excel
    },
    directives: {
      waves
    },
    filters: {
      statusFilter(status) {
        const statusMap = {
          1: 'success',
          0: 'danger'
        }
        return statusMap[status]
      },
      statusNameFilter(status) {
        const statusNameMap = {
          1: '启用',
          0: '禁用'
        }
        return statusNameMap[status]
      },
      typeFilter(type) {
        return calendarTypeKeyValue[type]
      }
    },
    data() {
      return {
        action: process.env.VUE_APP_BASE_API + '/backend_upload',
        myHeaders: {
          token: this.$store.getters.token
        },
        online_form:{
          province_code:'0',
          accountType:''
         
        },
        bank_list:[],
        province_list:[],
        city_list:[],
        merchantOnline:false,
        accountNode:false,
        activeName: 'first',
        imageUrl: '',
        tableKey: 0,
        nodes:[],
        value:true,
        limit: 1,
        list: null,
        value1:'2020-10-15',
        total: 0,
        listLoading: true,
        listQuery: {
          page: 1,
          limit: 10,
          merchant_name: '',
          merchant_id: '',
          province: '',
          city: '',
          district: ''

        },
        fileList: [],
        heTongFileList: [],
        businessFileList: [],
        bankPermitfileList: [],
        businessLicensefileList: [],
        medicalfileList: [],
        AuthfileList: [],
        idCardFanfileList: [],
        idCardZhengfileList: [],
        sortOptions: [{
          label: 'ID Ascending',
          key: 'sale_id asc'
        }, {
          label: 'ID Descending',
          key: 'sale_id desc'
        }],
        statusOptions: ['published', 'draft', 'deleted'],
        showReviewer: false,
        // is_alone:"1",
        tempCheck: {
          level_id: '',
          is_checked: 1,
          merchant_id: ''
        },
        temp: {
          merchant_name: '',
          merchant_address:'',
          sort_name:'',
          type_id: '',
          province: '',
          city: '',
          district: '',
          law_person_name: '',
          law_person_idcard_zheng: '',
          law_person_idcard_fan: '',
          medical_license: [],
          business_license: '',
          bank_address: '',
          bank_number: '',
          bank_permit: [],
          pay_person: '',
          pay_number: '',
          business: [],
          username: '',
          password: '',
          mobile: '',
          real_name: '',
          merchant_position: '',
          third_platform: [],
          hetong: [],
          is_alone: '',
          pay_rate: '',
          money_rate: '1.6',
          merchant_rate: '',
          status: '1',
          idnumber:'',
          merchant_auth_file:[],
          merchant_type:1
        },
        data: {
          third_platform: []
        },
        dialogCheckVisible: false,
        dialogFormVisible: false,
        dialogImageUrl: '',
        dialogVisible: false,
        dialogStatus: '',
        textMap: {
          update: 'Edit',
          create: 'Create'
        },
        idCard_zheng: '',
        idCard_fan: '',
        medical_license: '',
        business_license: '',
        bank_permit: '',
        business_information: '',
        level_list: [],
        merchant_type: [],
        merchant_level: [],
        merchant_province: [],
        merchant_city: [],
        merchant_district: [],
        merchant_service: [],
        dialogPvVisible: false,
        pvData: [],
        rule: {
          level_id: [{
            required: true,
            message: '等级必须选择',
            trigger: 'change'
          }]
        },
        rules: {
          merchant_name: [{
            required: true,
            message: '商户名称必须填写',
            trigger: 'change'
          }],
          merchant_address: [{
            required: true,
            message: '商户地址必须填写',
            trigger: 'change'
          }],
          type_id: [{
            required: true,
            message: '商户类型必须选择',
            trigger: 'change'
          }],
          province: [{
            required: true,
            message: '省份必须选择',
            trigger: 'change'
          }],
          city: [{
            required: true,
            message: '城市必须选择',
            trigger: 'change'
          }],
          district: [{
            required: true,
            message: '区县必须选择',
            trigger: 'change'
          }],
          law_person_name: [{
            required: true,
            message: '法人姓名必须输入',
            trigger: 'change'
          }],
          law_person_idcard_zheng: [{
            required: true,
            message: '身份证号码正面必须上传',
            trigger: 'blur'
          }],
          law_person_idcard_fan: [{
            required: true,
            message: '身份证号码反面必须上传',
            trigger: 'blur'
          }],
          medical_license: [{
            required: true,
            message: '医疗许可证必须上传',
            trigger: 'blur'
          }],
          business_license: [{
            required: true,
            message: '营业执照必须上传',
            trigger: 'blur'
          }],
          bank_number: [{
            required: true,
            message: '开户账号必须输入',
            trigger: 'blur'
          }],
          bank_address: [{
            required: true,
            message: '开户地址必须输入',
            trigger: 'blur'
          }],
          bank_permit: [{
            required: true,
            message: '开户许可证必须上传',
            trigger: 'blur'
          }],
          pay_person: [{
            required: true,
            message: '收款人必须输入',
            trigger: 'blur'
          }],
          pay_number: [{
            required: true,
            message: '收款账号必须输入',
            trigger: 'blur'
          }],
          real_name: [{
            required: true,
            message: '联系人姓名必须填写',
            trigger: 'blur'
          }],
          mobile: [{
            required: true,
            message: '联系人电话号码必须填写',
            trigger: 'blur'
          }],
          merchant_position: [{
            required: true,
            message: '联系人职位必须填写',
            trigger: 'blur'
          }],
          username: [{
            required: true,
            message: '联系人登录账号必须填写',
            trigger: 'blur'
          }],
          is_alone: [{
            required: true,
            message: '是否独家必须选择',
            trigger: 'blur'
          }],
          pay_rate: [{
            required: true,
            message: '打款比率必须填写',
            trigger: 'blur'
          }],
          money_rate: [{
            required: true,
            message: '用户利息必须填写',
            trigger: 'blur'
          }],
          merchant_rate: [{
            required: true,
            message: '返佣比率必须填写',
            trigger: 'blur'
          }]

        },
        downloadLoading: false
      }
    },
    created() {
      
      this.listQuery.merchant_id = this.$route.params.merchant_id
      this.cacheQueryFormat();
      this.getList();
      this.nodes = getNodes();
      //添加钩子，页面刷新
      window.addEventListener('beforeunload', e => this.beforeunloadFn(e))
    },
    destroyed() {
      //添加钩子，页面刷新
      window.removeEventListener('beforeunload', e => this.beforeunloadFn(e))
    },
    methods: {
      excelout() {
      this.listLoading = true
      this.listQuery.page = 1
      this.listQuery.limit = this.total
      exceloutmerchant(this.listQuery).then(response => {
          this.listLoading = false
          const filepath = response.data.path
          window.location.href = filepath
        })
      },
      publiceAccountSubmit(){
        publiceAccountSubmit(this.online_form).then(res => {
                this.merchantOnline = false;
                this.getList();
                this.online_form = {};
            })
      },
      publiceAccount(row){
        this.online_form.province_code = 0;
        this.merchantOnline = true;
        this.online_form.merchant_id = row.merchant_id;
        this.getInvestorRegion();
        getMerchantAccount(this.online_form).then(res => {
          if(res.data){
            this.online_form = res.data;
          }
          
        })
        yuanfeng_getBank().then(res => {
          this.bank_list = res.data;
        })
      },
      getInvestorRegion(){
        console.log(this.online_form.province_code)
        let p = {p_code:this.online_form.province_code}
        getInvestorRegion(p).then(res => {
              if(this.online_form.province_code==0){
                this.province_list = res.data;
              }else{
                this.city_list = res.data;
              }
            })
      },
      haierOnline(merchant_id){
        this.merchantOnline = true;
        this.online_form.merchant_id = merchant_id;
      },
      haierOnlineSubmit(){
        this.$confirm('请确认操作无误', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          haierOnlineSubmit(this.online_form).then(res => {
            if(res.data.code=='0000'){
              this.$message({
                type: 'success',
                message: '操作成功!'
              });
            }else{
              this.$message({
                type: 'error',
                message: res.data.desc
              });
            }
            this.merchantOnline = false;
            this.getList();
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消操作'
          });
        });
      },
      beforeunloadFn(e) {
        //刷新页面事件
        sessionStorage.removeItem('merchantList');
      },
      cacheQueryFormat(){
        let cacheQuery = sessionStorage.getItem('merchantList');
        if(cacheQuery){
          this.listQuery = JSON.parse(cacheQuery);
        }
      },
      handlePreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },

      change_auth(row){
        let p = {merchant_id:row.merchant_id,merchant_auth:row.merchant_auth}

        let tip = '确定医院已签署授权书吗？';
        if(!row.merchant_auth){
          tip = '确定医院未签署授权书吗？';
        }else{
          if(row.merchant_auth_file==null){
            this.$message({
                type: 'warning',
                message: '请先上传医院授权书!'
            });
            row.merchant_auth = false;
            return;
          }
        }
        this.$confirm(tip, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
            changeMerchantAuth(p).then(res => {
              this.$message({
                type: 'success',
                message: '操作成功!'
              });
            })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消操作'
          });
        });
      },
      medicalfileRemove(file) {
        this.temp.medical_license.splice(file["number"], 1);
        this.medicalfileList.splice(file["number"], 1);
      },
      handAuthfileRemove(file) {
        console.log(this.temp.merchant_auth_file)
        this.temp.merchant_auth_file.splice(file["number"], 1);
        this.AuthfileList.splice(file["number"], 1);
      },
      handleRemove(file) {
        this.temp.third_platform.splice(file["number"], 1);
        this.fileList.splice(file["number"], 1);
      },
      handleHetongRemove(file) {

        this.temp.hetong.splice(file["number"], 1);
        this.heTongFileList.splice(file["number"], 1);

      },
      handlepermitRemove(file) {
        this.temp.bank_permit.splice(file["number"], 1);
        this.bankPermitfileList.splice(file["number"], 1);
      },
      handleBusinessRemove(file) {
        this.temp.business.splice(file["number"], 1);
        this.businessFileList.splice(file["number"], 1);

      },
      changeSignDate(row) {
        const queryy = {};
        queryy.create_time = row.create_time;
        queryy.merchant_id = row.merchant_id;
        changeSignDate(queryy).then(response => {
           this.listLoading = false
           this.$notify({
                title: 'Success',
                message: 'Update Successfully',
                type: 'success',
                duration: 2000,
                onClose: this.getList()
              })
        })
      },
      getList() {
        sessionStorage.setItem('merchantList',JSON.stringify(this.listQuery))
        fetchMerchantBase().then(res => {
          this.merchant_type = res.data.type
          this.merchant_level = res.data.merchant_level
          this.merchant_province = res.data.province
          this.level_list = res.data.level_list
        })
        this.listLoading = true
        fetchList(this.listQuery).then(response => {
          this.list = response.data.data
          this.total = response.data.total
          setTimeout(() => {
            this.listLoading = false
          }, 1.0 * 1000)
        })
      },
      handleCheck(row) {
        this.dialogCheckVisible = true
        this.tempCheck.merchant_id = row.merchant_id
      },
      handleChecked() {
        this.$refs['dataCheckForm'].validate((valid) => {
          if (valid) {
            updateMerchantChecked(this.tempCheck).then(() => {
              this.dialogCheckVisible = false
              this.$refs['dataForm'].resetFields();
              this.$notify({
                title: 'Success',
                message: 'Update Successfully',
                type: 'success',
                duration: 2000,
                onClose: this.getList()
              })
            })

          }
        })
      },
      handleFilter() {
        this.listQuery.page = 1
        this.getList()
      },
      handleModifyStatus(row, status) {
        const tempData = Object.assign({}, row)
        tempData.status = status
        updateMerchantStatus(tempData).then(() => {
          const index = this.list.findIndex(v => v.id === this.temp.id)
          this.list.splice(index, 1, this.temp)
          this.dialogFormVisible = false
          this.$notify({
            title: 'Success',
            message: 'Update Successfully',
            type: 'success',
            duration: 2000,
            onClose: this.getList()
          })
        })

        row.status = statusNameFilter(status)
      },
      sortChange(data) {
        const {
          prop,
          order
        } = data
        if (prop === 'id') {
          this.sortByID(order)
        }
      },
      sortByID(order) {
        if (order === 'ascending') {
          this.listQuery.sort = '+id'
        } else {
          this.listQuery.sort = '-id'
        }
        this.handleFilter()
      },
      resetTemp() {

      },
      handleCreate() {
        this.accountNode = true;
        this.resetTemp()
        fetchMerchantBase().then(res => {
          this.merchant_type = res.data.type
          this.merchant_level = res.data.level
          this.merchant_province = res.data.province
        })
        this.dialogStatus = 'create'
        this.dialogFormVisible = true

        this.$nextTick(() => {
          this.$refs['dataForm'].clearValidate()
          this.$refs['dataForm'].resetFields();
        })

      },
      createData() {
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            //  this.temp.id = parseInt(Math.random() * 100) + 1024 // mock a id
            //   this.temp.author = 'vue-element-admin'
            if ((this.temp.hetong.length > 0) && (this.temp.business.length > 0)) {
              createMerchant(this.temp).then(() => {
                this.list.unshift(this.temp)
                this.dialogFormVisible = false
                this.$notify({
                  title: 'Success',
                  message: 'Created Successfully',
                  type: 'success',
                  duration: 2000,
                  onClose: this.getList()
                })
              })
            }
          } else {
            this.$notify({
              title: 'error',
              message: '合同和营业执照必须上传',
              type: 'error',
              duration: 2000
            })
          }
        })
      },
      handleUpdate(row) {
        this.accountNode = false;
        if(this.nodes.indexOf('139')!=-1){
          this.accountNode = true;
        }
        this.data.idCard_zheng = row.idCard_zheng
        this.data.idCard_fan = row.idCard_fan
        this.data.medical_license = row.medical_license_pic
        this.data.business_license = row.business_license_pic
        this.data.bank_permit = row.bank_permit_pic

        this.temp.third_platform = row.third_platform
        this.temp.merchant_type = row.merchant_type
        this.fileList = row.third_platform_pic

        this.temp.hetong = row.hetong
        this.heTongFileList = row.hetong_pic

        this.temp.business = row.hetong
        this.businessFileList = row.business_pic

        this.temp.bank_permit.push(row.bank_permit);
        this.bankPermitfileList = row.bank_permit_pic

        this.temp.business_license = row.business_license
        this.businessLicensefileList = row.business_license_pic

        this.temp.medical_license.push(row.medical_license);
        this.medicalfileList = row.medical_license_pic

        this.temp.merchant_auth_file.push(row.merchant_auth_file);
        this.AuthfileList = row.auth_license_pic

        this.temp.law_person_idcard_fan = row.law_person_idcard_fan
        this.idCardFanfileList = row.idCard_fan

        this.temp.law_person_idcard_zheng = row.law_person_idcard_zheng
        this.idCardZhengfileList = row.idCard_zheng


        this.temp = Object.assign({}, row) // copy obj
        fetchMerchantBase().then(res => {
          this.merchant_type = res.data.type
          this.merchant_level = res.data.level
          this.merchant_province = res.data.province
        })
        this.changeRegionProvince(this.temp.province)
        this.changeRegionCity(this.temp.city)
        this.temp.password = ''
        this.dialogStatus = 'update'
        this.dialogFormVisible = true
        this.$nextTick(() => {
          this.$refs['dataForm'].clearValidate()
        })
      },
      updateData() {
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            const tempData = Object.assign({}, this.temp)
            if ((this.temp.hetong.length > 0) && (this.temp.business.length > 0)) {
              updateMerchant(tempData).then(() => {
                const index = this.list.findIndex(v => v.id === this.temp.id)
                this.list.splice(index, 1, this.temp)
                this.dialogFormVisible = false
                this.$refs['dataForm'].resetFields();
                this.$notify({
                  title: 'Success',
                  message: 'Update Successfully',
                  type: 'success',
                  duration: 2000,
                  onClose: this.getList()
                })
              })
            } else {
              this.$notify({
                title: 'error',
                message: '资料不完整',
                type: 'error',
                duration: 2000
              })
            }
          }

        })
      },
      handleDelete(row, index) {

        deleteMerchant(row.merchant_id).then(response => {
          this.$notify({
            title: 'Success',
            message: 'Delete Successfully',
            type: 'success',
            duration: 2000
          })
          this.list.splice(index, 1)
        })
      },
      formatJson(filterVal) {
        return this.list.map(v => filterVal.map(j => {
          if (j === 'timestamp') {
            return parseTime(v[j])
          } else {
            return v[j]
          }
        }))
      },
      changeRegionProvince(val) {
        let pam = {pid:val};
        fetchMerchantRegion(pam).then(res => {

          this.merchant_city = res.data
        })
      },
      changeRegionCity(val) {
        let pam = {pid:val};
        fetchMerchantRegion(pam).then(res => {

          this.merchant_district = res.data
        })
      },
      UploadUrl: function() {
        return this.action
      },
      handIdcardZhengSuccess(res, file) {
        this.temp.law_person_idcard_zheng = res.data.attach_id.id
        this.data.idCard_zheng = res.data.path
        // console.log(this.temp)
      },
      handIdcardFanSuccess(res, file) {
        this.data.idCard_fan = res.data.path
        this.temp.law_person_idcard_fan = res.data.attach_id.id
      },
      handMedicalSuccess(res, file) {
        this.data.medical_license = res.data.path
        this.temp.medical_license.push(res.data.attach_id.id)
      },
      handBussessionSuccess(res, file) {
        this.temp.business_license = res.data.attach_id.id
        this.data.business_license = res.data.path
      },
      // handAuthSuccess(res, file) {
      //   this.temp.merchant_auth_file = res.data.attach_id
      //   this.data.merchant_auth_file = res.data.path
      // },
      handAuthSuccess(res, file) {
        this.temp.merchant_auth_file.push(res.data.attach_id.id);
        this.data.merchant_auth_file = res.data.path
      },
      handBankPermitSuccess(res, file) {
        this.temp.bank_permit.push(res.data.attach_id.id);
          this.bankPermitfileList.push({
            attach_id: res.data.attach_id.id,
            number: this.businessFileList.length,
            url: res.data.path
          })
      },
      handBusinessSuccess(res, file) {
        this.temp.business.push(res.data.attach_id.id)
        //  this.fileList.push(res.data.path)

        this.businessFileList.push({
          attach_id: res.data.attach_id,
          number: this.businessFileList.length,
          url: res.data.path
        })

      },
      handThirdPlatformSuccess(res, file) {
        this.temp.third_platform.push(res.data.attach_id.id)
        //  this.fileList.push(res.data.path)
        this.fileList.push({
          attach_id: res.data.attach_id,
          number: this.heTongFileList.length,
          url: res.data.path
        })
      },
      handHetongSuccess(res, file) {
        this.temp.hetong.push(res.data.attach_id.id)

        this.heTongFileList.push({
          attach_id: res.data.attach_id,
          number: this.heTongFileList.length,
          url: res.data.path
        })
        console.log(this.heTongFileList);

      },
      beforeAvatarUpload(file) {
        // console.log(file)
        let isJPG = file.type === 'image/png'
        const isLt2M = file.size / 1024 / 1024 < 200
        if ((file.type === 'image/png') || (file.type === 'image/jpeg') || (file.type === 'image/gif')) {
          isJPG = true
        } else {
          isJPG = false
          this.$message.error('上传头像图片只能是 png,jpg,或者jif格式')
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!')
        }
        //  console.log(isJPG && isLt2M)
        return isJPG && isLt2M
      }
    }
  }
</script>
<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    white-space: nowrap;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }

  .avatar {
    width: 178px;
    height: 178px;
    display: block;
    float: left;
  }
</style>
